<template>
  <div
    :style="{ height: floors.height + 'px', background: floors.background }"
    class="blank-box"
  >
    <div
      class="resultLine"
      :style="{
        'border-color': floors.lineColor,
        width: floors.lineStyle == '0' ? '100%' : floors.leftRightPadding + '%'
      }"
      :class="{
        solid: floors.style == 'solid',
        dashed: floors.style == 'dashed',
        dotted: floors.style == 'dotted',
        none: floors.style == 'none'
      }"
    ></div>
  </div>
</template>

<script>
export default {
  props: {
    floors: Object
  },
};
</script>
<style scoped>
/* 辅助线 */
.blank-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* 线条样式, 可选值 solid: 实线, dashed: 虚线, dotted: 点线, none: 无 */
.blank-box .resultLine {
  width: 100%;
  border-bottom: 1px dashed #bbb;
}

.blank-box .resultLine.solid {
  border-bottom-style: solid;
}

.blank-box .resultLine.dashed {
  border-bottom-style: dashed;
}

.blank-box .resultLine.dotted {
  border-bottom-style: dotted;
}

.blank-box .resultLine.none {
  border-bottom-style: none;
}

/* 辅助线 end */
</style>
